<template>
	<view>
		<view class="topBg">
			<view class="titleBox flex-x-center">增值服务</view>
		</view>
		<view class="contentBox">
			<view class="contentTitle">
				<view class="titles flex-y-center">
					<image class="imagebox" src="../../static/ic_value_add_title.png"></image>
					<view class="">增值服务内容</view>
				</view>
			</view>
			<!-- 券分类列表 -->
			<view class="listBox">
				<view class="itemBox" v-for="(item,index) in dataList" :key="index" @click="goPage(item,index)">
					<view class="iconImg">
						<image :src="item.iconImg" mode=""></image>
					</view>
					<view class="tagText">{{ item.name }}</view>
				</view>
			</view>
		</view>
		<view class="foolerBox">
			 <radio-group  @change="radioChange">
				 <radio  value="1" :checked="checkValue =='1'" class="radio r">我已知悉并同意</radio>
			 </radio-group>
			<view class="tips">温馨提示:您即将离开湖州"南太湖健康保”公众号，进入共保体确认的第三方服务商提供服务页面。服务页面可能需要收集您的个人信息，请知悉。</view>
		</view>
		<vaeEquityPop ref="quanYiPop" :companyType="companyType" :ticketCodeList="ticketCodeList"></vaeEquityPop>
	</view>
</template>

<script>
	import customHeader from "@/components/customHeader.vue";
	import vaeEquityPop from "@/components/vaeEquityPop.vue";
	export default {
		components: {
			customHeader,
			vaeEquityPop
		},
		data() {
			return {
				// 当前选择的券类型
				companyType: undefined,
				// 券列表
				ticketCodeList: [],
				checkValue:null,
				// companyType 服务商类型（1是健康科普，2是口腔，3是购药，4是早筛，5是问诊，6是重疾，7是基因检测）
				dataList:[
					{
						iconImg: require('@/static/ic_value_add_ya.png'),
						name: '口腔套餐',
						companyType: 2,
					},
					{
						iconImg: require('@/static/ic_value_add_yao.png'),
						name: '线下购药',
						companyType: 3,
					}, 	
					{
						iconImg: require('@/static/ic_value_add_ke.png'),
						name: '健康科普',
						companyType: 1,
					}, 	
					{
						iconImg: require('@/static/ic_value_add_wen.png'),
						name: '重疾问卷早筛',
						companyType: 4,
					}, 	
					{
						iconImg: require('@/static/ic_value_add_zhen.png'),
						name: '在线问诊',
						companyType: 5,
					}, 	
					{
						iconImg: require('@/static/ic_value_add_lv.png'),
						name: '重疾绿通服务',
						companyType: 6,
					}, 	
					{
						iconImg: require('@/static/ic_value_add_ji.png'),
						name: '靶向药基因检测',
						companyType: 7,
					}, 	
				]
			}
		},
		onLoad() {},
		onShow() {
			// 未登录，跳转到登录页
			if (!uni.getStorageSync('userToken')) {
				// this.$Utils.navigateTo("/pages/login/login?from=index&route=3");
				return;
			}
		},
		methods: {
			radioChange(e){
				this.checkValue = e.detail.value;
				console.log(e.detail.value)
			},
			// 某个券类型被点击
			goPage(item, index){
				// 健康科普，直接页面跳转
				if(item.companyType == 1){
					this.getServiceLink(item.companyType);
					return;
				}
				this.companyType = item.companyType;
				// 查询本类型的券列表
				this.getUserTicketCodeList(this.companyType);
				// 调用获取超链接地址的方法
				this.getServiceLink(item.companyType);
				
				// console.log("item:", item, " index:", index, this.companyType);
				
			},
			// 获取服务商超链接地址
			getServiceLink(companyType) {
			    this.$Api.commonPost(null, `ticket/getCompanyLink?companyType=${companyType}`).then(res => {
					// console.log("res:", res);
			        const link = res.data.target_address;
			        if (link) {
			            window.open(link, '_blank');
			        } else {
			            this.$Utils.failToast('未找到对应的超链接地址');
			        }
			    }).catch(error => {
			        this.$Utils.failToast('获取超链接地址失败');
			    });
			},
			/** 查询本类型的券列表 */
			getUserTicketCodeList(companyType) {
			    // console.log("getUserTicketCodeList start, companyType:", companyType);
			    if (!companyType) {
			        this.$Utils.failToast('请选择券类型');
			        return;
			    }
			    // data, url, func
			    // 加载是券列表数据
			    this.$Api.commonPost(null, "ticket/getTicketCode?companyType="+companyType)
			      .then(res => {
			            console.log("res:", res);
			            if (res.code === 200) { // 假设成功返回码是200
			                this.ticketCodeList = res.data;
			                if (!this.ticketCodeList || this.ticketCodeList.length === 0) {
			                    this.$Utils.failToast('暂无该类型的权益码');
			                    return;
			                }
			                // 打开券列表页面
			                this.openPop('quanYiPop');
			            } else {
			                this.$Utils.failToast('获取权益码失败：' + res.message);
			            }
			        })
			      .catch(error => {
			            console.error('接口请求出错:', error);
			            this.$Utils.failToast('接口请求出错，请稍后重试');
			        });
			},
			openPop(type) {
				let pareRef = this.$refs[type + ''];
				return pareRef.openoutmodal(pareRef);
			},
			
		},
	}
</script>

<style lang="less">
	@import url("../../common/css/global.less");
	page{
		background: #F7F7F7;
	}
	
	.topBg{
		width: 100%;
		height: 500px;
		background: url('../../static/ic_value_add_bg.png');
		background-repeat: no-repeat;
		background-size: 100%;
		.titleBox{
			font-size: 20px;
			color: #fff;
			padding: 20px 0;
		}
	}
	.contentBox{
		background: #fff;
		border-radius: 12px;
		min-height: 500rpx;
		margin-top: -240px;
		margin-left: 20px;
		margin-right: 20px;
		padding: 12px;
		.contentTitle{
			background: linear-gradient( 270deg, #FFFFFF 0%, #FFDABE 100%);
			border-radius: 10px;
			.imagebox{
				width: 36px;
				height: 36px;
				padding: 5px 10px;
			}
			.titles{
				color: #FF7011;
				font-size: 18px;
			}
		}
		.listBox{
			display: flex;
			flex-wrap: wrap;
			.itemBox{
				margin-top: 17px;
				width: 33%;
				.iconImg {
					width: 100rpx;
					height: 100rpx;
					margin: 0 auto;
					position: relative;
					image {
						width: 100%;
						height: 100%;
					}
				}
				.tagText{
					color: #666;
					margin-top: 11px;
					font-size: 13px;
					text-align: center;
				}
			}
		}
	}
	
	.foolerBox{
		background: #fff;
		border-radius: 12px;
		padding: 12px;
		margin-left: 20px;
		margin-right: 20px;
		margin-top: 14px;
		font-size: 13px;
		.tips{
			font-size: 13px;
			color: #999;
			margin-top: 10px;
			line-height: 20px;
		}
	}
    
</style>